資料來源是先前建立的餐廳 API（採用 json-server 方式建立），管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面，因為現有前端技術僅支持簡單的 API 建立，無法進行後端邏輯 API 的開發。因此後台管理模板無法提供對現有餐廳資料做修改和移除功能。

(2-5)管理餐廳列表
路徑 src / views / admin 底下新增 AdminResList.vue 檔案。

• 導覽（nav）架構請參考「Day8-試試Vue3-會員登入後轉跳主頁」模板。
• 餐廳列表為表格設計，請參考「Day23-試試Vue3-口袋餐廳的口袋清單(1)」篇的 <table></table> 架構。
• 新增路由請參考上一篇「Day28-試試Vue3-後台管理者頁面(1)」的"(2-3)新增路由"小節。

附上管理餐廳列表畫面。

1.表單操作情境

• 表單內容取自餐廳 API 並由 JavaScript 動態渲染畫面。
• 當管理者點擊「新增餐廳」按鈕，表單最末處新增空白列供管理者填寫欲新增的資料。及表格右下方出現「送出」按鈕。
  • 當新增的空白列沒有填妥就按「新增餐廳」，畫面會跳出「已有空白列供填寫，請輸入完畢後再新增!」的警告訊息。
  • 表格欄位有「品牌受眾」、「品牌名稱」、「地址」。
    • 欄位「品牌受眾」為下拉式選單（<select><option></option></select>），項目內容是寫好固定值（如下）並由 v-for="item in resTypeList" 將值進行多筆資料渲染。其餘兩個欄位則由 <input type="text" /> 呈現。

<script>
export default {
  data() {
    return {
      ...
      // 「品牌受眾」下拉選單內容
      resTypeList: ["學生族群", "小資族群", "精緻族群", "頂級族群"],
      ...
    };
  },
  ...
};
</script>

2.表單提交的規範

• 表單中所有欄位必須有值才可提交。否則跳出「欄位不可空值!」的警告訊息。
  • 不管網路請求成功還是失敗，表單裡所有欄位內容都必須恢復預設值。程式碼請參考「Day27-試試Vue3-餐廳實評頁面(2)」篇餐廳實評頁面的「提交評論」按鈕。
  • 「送出」按鈕點擊後要觸發方法裡執行 axios.post() 的函式，將管理者輸入的內容新增至餐廳 API 中。新增資料的網路請求程式請參考「Day5-試試Vue3-建立會員API」篇首頁(註冊)畫面的邏輯。
• 提交成功時呼叫方法裡執行 axios.get() 餐廳 API 的函式，使頁面上的餐廳列表能即時更新資料。

(2-6)登出
選擇功能列表的登出後會將頁面導至管理者登入頁面。程式碼請參考「Day8-試試Vue3-會員登入後轉跳主頁)」篇。